<template>
  <div class="announcement-list-container">
    <el-card>
      <template #header>
        <div class="header-content">
          <span>公告列表</span>
        </div>
      </template>

      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="标题">
          <el-input v-model="searchForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <div class="announcement-list">
        <div
          v-for="announcement in announcements"
          :key="announcement.announcementId"
          class="announcement-item"
        >
<!--          @click="$router.push(`/announcements/${announcement.announcementId}`)"-->
          <div class="announcement-content">
            <h3>{{ announcement.title }}</h3>
            <p class="content">{{ announcement.content }}</p>
            <div class="meta">
              <span>发布时间：{{ formatDate(announcement.createTime) }}</span>
<!--              <span>发布人：{{ announcement.publisher }}</span>-->
            </div>
          </div>
          <div class="announcement-status">
            <el-tag type="success">已发布</el-tag>
          </div>
        </div>
      </div>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { faker } from '@faker-js/faker'
import {getAnnouncementList} from "@/api/announcement.js";

// 搜索表单
const searchForm = reactive({
  title: ''
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 公告列表
const announcements = ref([])

// 搜索
const handleSearch = () => {
  // TODO: 实现搜索逻辑
  loadAnnouncements()
}

// 重置搜索
const resetSearch = () => {
  searchForm.title = ''
  loadAnnouncements()
}

// 加载公告列表
const loadAnnouncements = async () => {
  // TODO: 实现加载公告列表逻辑
  const result = await getAnnouncementList({
    page: currentPage.value,
    size: pageSize.value,
    title: searchForm.title
  })
  announcements.value = result.data.records
  total.value = result.data.total
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

// 分页相关方法
const handleSizeChange = (val) => {
  pageSize.value = val
  loadAnnouncements()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadAnnouncements()
}

onMounted(() => {
  loadAnnouncements()
})
</script>

<style scoped>
.announcement-list-container {
  padding: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.announcement-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.announcement-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.announcement-content {
  flex: 1;
}

.announcement-content h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.content {
  color: #606266;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.meta {
  color: #909399;
  font-size: 14px;
}

.meta span {
  margin-right: 15px;
}

.announcement-status {
  margin-left: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
